<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>购物清单</title>
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!-- div container start -->
<div class="container container-fluid mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a></li>
                <li class="breadcrumb-item active">购物清单</li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <div class="list-group mt-3">
        <a href="create.php" class="list-group-item list-group-item-action">新建购物清单</a>
    </div>

    <div id="listOfShoppingList" class="mt-2 mb-2">
    </div>

</div>
<!-- div container end -->

<!-- ----------------------------------------------------------------------- -->

<!-- Modal 确认删除 开始 -->
<div class="modal fade" id="modalConfirmDelete" data-bs-backdrop="true" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">确定要删除吗？</h1>
                <button type="button" id="btnCloseModalConfirmDelete" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p>此操作<span class="text-danger">无法撤销</span>，请谨慎选择。</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                <button id="btnConfirmDelete" type="button" class="btn btn-outline-primary">确定</button>
            </div>

        </div>
    </div>
</div>
<!-- Modal 确认删除 结束 -->

<!-- ----------------------------------------------------------------------- -->

<script>
    // 获取 the 列表 of 购物清单
    function getLists() {
        var url = "generateListOfShoppingLists.php";
        $.get(url)
            .done(function(data ) {
                $("#listOfShoppingList").html(data)
            })
            .fail(function () {
                alert("获取购物清单列表失败。")
            });
    }

    // 网页加载完成后，自动生成待办事务收纳箱列表
    $(function () {
        getLists()
    })
</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    $(function () {
        $(document).on("click", ".btnUp", function(event) {

            var idOne = this.dataset.id;
            var sortNumberOne = this.dataset.sortnumber;

            // ---------------------------------------------------------------------

            var arrIds = [];
            var arrSortNumbers = [];

            var buttons = $(".btnUp")
            if (buttons.length > 1) {

                for (button of buttons) {
                    arrIds.push(button.dataset.id)
                    arrSortNumbers.push(button.dataset.sortnumber)
                }

                var indexOfIdOne = arrIds.indexOf(idOne);
                var indexOfIdTwo = (indexOfIdOne - 1);

                if (indexOfIdOne > 0) {

                    var idTwo = arrIds[indexOfIdTwo];
                    var sortNumberTwo = arrSortNumbers[indexOfIdTwo];
                    var url = `changeSortNumber.php?idOne=${idOne}&idTwo=${idTwo}&sortNumberOne=${sortNumberOne}&sortNumberTwo=${sortNumberTwo}`;

                    $.get(url)
                        .done(function(data ) {
                            getLists()
                        })
                        .fail(function () {
                            alert("请求列表失败。")
                        });

                }

            }

        })
    })

    $(function () {
        $(document).on("click", ".btnDown", function(event) {

            // ---------------------------------------------------------------------

            var idOne = this.dataset.id;
            var sortNumberOne = this.dataset.sortnumber;

            // ---------------------------------------------------------------------

            var arrIds = [];
            var arrSortNumbers = [];

            var buttons = $(".btnDown")

            if (buttons.length > 1) {

                for (button of buttons) {
                    arrIds.push(button.dataset.id)
                    arrSortNumbers.push(button.dataset.sortnumber)
                }

                var indexOfIdOne = arrIds.indexOf(idOne);
                var indexOfIdTwo = (indexOfIdOne + 1);

                if ((indexOfIdOne + 1) < buttons.length) {

                    var idTwo = arrIds[indexOfIdTwo];
                    var sortNumberTwo = arrSortNumbers[indexOfIdTwo];
                    var url = `changeSortNumber.php?idOne=${idOne}&idTwo=${idTwo}&sortNumberOne=${sortNumberOne}&sortNumberTwo=${sortNumberTwo}`;

                    $.get(url)
                        .done(function(data ) {
                            getLists()
                        })
                        .fail(function () {
                            alert("请求失败。")
                        });

                }

            }

        })
    })

</script>

<!-- ----------------------------------------------------------------------- -->
<script>
    $(function () {

        var idToDelete = ""

        $(document).on("click", ".btnDelete", function(event) {

            idToDelete = this.dataset.id

            const myModal = new bootstrap.Modal($("#modalConfirmDelete"), {
                backdrop: true,
                keyboard: true
            })
            myModal.show()

        })

        $("#btnConfirmDelete").on("click", function (event) {

            $("#btnCloseModalConfirmDelete").click();

            var url = "delete.php?id=" + idToDelete

            $.get(url)
                .done(function(data ) {
                    // alert(data)
                    getLists()
                })
                .fail(function () {
                    alert("删除失败。")
                });

        })

    })
</script>

<!-- ----------------------------------------------------------------------- -->

<!-- 添加「返回顶部按钮」 -->
<script src="../resources/vanilla-back-to-top/index.js"></script>
<script src="../resources/vanilla-back-to-top/config.js"></script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
